<template>
    <el-dialog
        append-to-body
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
    >
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="80px"
        >
            <el-form-item
                label="名称"
                prop="name"
            >
                <el-input
                    v-model="form.name"
                    style="width: 370px;"
                />
            </el-form-item>
            <el-form-item
                label="排序"
                prop="jobSort"
            >
                <el-input-number
                    v-model.number="form.jobSort"
                    :min="0"
                    :max="999"
                    controls-position="right"
                    style="width: 370px;"
                />
            </el-form-item>
            <el-form-item
                v-if="form.pid !== 0"
                label="状态"
                prop="enabled"
            >
                <el-radio
                    v-for="item in jobStatus"
                    :key="item.id"
                    v-model="form.enabled"
                    :label="item.value === 'true'"
                >
                    {{ item.label }}
                </el-radio>
            </el-form-item>
        </el-form>
        <div
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                type="text"
                @click="crud.cancelCU"
            >
                取消
            </el-button>
            <el-button
                :loading="crud.status.cu === 2"
                type="primary"
                @click="crud.submitCU"
            >
                确认
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import {form} from '@crud/crud';

const defaultForm = {
    id: null,
    name: '',
    jobSort: 999,
    enabled: true
};
export default {
    mixins: [form(defaultForm)],
    props: {
        jobStatus: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            rules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ],
                jobSort: [
                    {required: true, message: '请输入序号', trigger: 'blur', type: 'number'}
                ]
            }
        };
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
</style>
